<template>
  <div class="box">
    <div class="box-header">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-cvm-orgdiscreet"></div>
      <x-loading :show="showLoading"></x-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";

export default {
  name: "",
  data() {
    return {
      showLoading: false,
      option: null,
      chartInstance: null
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      this.showLoading = true;
      axios
        .get(
          this.URLHEAD_AGENT + "http://jingwuyun.yihuangis.com:9999/xfweb/SysDep/getDepType"
        )
        .then(res => {
          let json = res.data;
          let obj = [{
            name: "现役队",
            value: json.tcount[0][1]},
            {name: "微型消防站",
            value: json.tcount[1][1]},
            {name: "专职消防队",
            value: json.tcount[2][1]
          }];
          let spirit =
            "image://";
          this.option = {
              tooltip:{formatter:'{b}:{c}人'},
              grid:{top:10,left:10,right:30,bottom:10,containLabel:true},
              xAxis:{
                splitLine:{show:true,lineStyle:{color:'#ffffff25'}},
                  splitArea:{show:true,areaStyle:{color:'#00000030'}},
                  axisTick:{show:false},
                  axisLine:{show:false},
                  axisLabel:{color:'#fff',fontSize:12,margin:10}
              },
              yAxis:{
                  type:'category',
                  data:['现役队','微型消防站','专职消防队'],
                  splitLine:{show:true,lineStyle:{color:'#ffffff45'}},
                  axisTick:{show:false},
                  axisLine:{show:false},
                  axisLabel:{color:'#fff',fontSize:12,margin:10}
              },
              series:[{
                  type:'pictorialBar',
                  symbol:spirit,
                  symbolRepeat:'fixed',
                  symbolMargin:'5%',
                  symbolClip:true,
                  symbolSize:30,
                  symbolBoundingData:2000,
                  data:obj,
                  label:{
                      show:true,
                      position:'right',
                      color:'#fff',
                      fontSize:12,
                      formatter:'{c}人'
                  }
              }]
          }
          this.$Crender("chart-cvm-orgdiscreet", this.option);
          this.showLoading = false;
        });
    }
  }
};
</script>

<style lang="" scoped>
</style>